
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>柱状图展示强度值</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body style="background-color: black;">
    <canvas id="myChart"></canvas>
    <script>
      fetch('https://apphq.longhuvip.com/w1/api/index.php?Order=1&a=RealRankingInfo&st=10&apiv=w21&Type=1&c=ZhiShuRanking&PhoneOSNew=1&ZSType=7&&_=1683115701361')
        .then(response => response.json())
        .then(data => {
          const labels = [];
          const dataPoints = [];
          const bgColor = [];
          data.list.forEach(item => {
            labels.push(item[1]);
            dataPoints.push(item[2]);
            if (item[2] > 5000) {
              bgColor.push('rgba(255, 99, 132, 1)');
            } else {
              bgColor.push('rgba(54, 162, 235, 1)');
            }
          });
          const ctx = document.getElementById('myChart').getContext('2d');
          const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
              labels: labels,
              datasets: [{
                label: '强度',
                data: dataPoints,
                backgroundColor: bgColor,
                borderColor: bgColor,
                borderWidth: 1
              }]
            },
            options: {
              scales: {
                yAxes: [{
                  ticks: {
                    beginAtZero: true,
                    fontColor: 'white'
                  },
                  gridLines: {
                    color: 'rgba(255, 255, 255, 0.2)'
                  }
                }],
                xAxes: [{
                  ticks: {
                    fontColor: 'white'
                  },
                  gridLines: {
                    color: 'rgba(255, 255, 255, 0.2)'
                  }
                }]
              },
              legend: {
                labels: {
                  fontColor: 'white'
                }
              }
            }
          });
        });
    </script>
  </body>
</html>